<template>
  <div class="nav-wrapper">
    <div class="logo-wrapper">
      <div class="img-wrapper">
        <img src="http://tpl-c913457.pic-tpl.websiteonline.cn/upload/f01_fxby.png" width="70px"
        height="45px">
      </div>
      <span>梦幻马卡龙</span>
    </div>
    <div class="nav-header">
      <ul>
        <li @click="switchTo('/')">
          <span :class="{on: '/' === $route.path}">首页</span>
        </li>
        <li @click="switchTo('/company')">
          <span :class="{on: '/company' === $route.path}">公司简介</span>
        </li>
        <li @click="switchTo('/news')">
          <span :class="{on: '/news' === $route.path}">新闻动态</span>
        </li>
        <li @click="switchTo('/sweets')">
          <span :class="{on: '/sweets' === $route.path}">美食甜品</span>
        </li>
        <li @click="switchTo('/users')">
          <span :class="{on: '/users' === $route.path}">用户留言</span>
        </li>
        <li @click="switchTo('/contact')">
          <span :class="{on: '/contact' === $route.path}">管理员界面</span>
        </li>
      </ul>
    </div>
    <div class="login">
      <i v-if="nickName">{{this.nickName}}{{this.id}}</i>
      <span v-if="!nickName" @click="clickForm">登录</span>
      <span v-else @click="logout">退出</span>
    </div>
    <van-icon name="shopping-cart-o" size="30px" class="shopping-cart" @click="cart" :class="{'cart': isClickCart}" />
    <van-tag round type="primary" class="tag" color="pink">{{this.productNum}}</van-tag>
    <div class="model-wrapper" v-if="Showform">
      <van-icon name="cross" style="float: right;" @click="hideForm" />
      <h3>用户登录</h3>
      <div class="" style="height: 20px;"></div>
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
          style="width: 40%; margin-left: 460px;"
        />
        <div class="" style="height: 20px;"></div>
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
          style="width: 40%; margin-left: 460px;"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit" style="width: 40%; margin-left: 450px;" color="pink">
          登录
          </van-button>
          <van-button round block type="info" native-type="submit" style="width: 40%; margin-left: 450px; margin-top: 20px;" color="pink" @click="toReg">
          注册
          </van-button>
        </div>
      </van-form>
    </div>
    <div class="model-wrapper" v-if="register">
      <van-icon name="cross" style="float: right;" @click="hideReg" />
      <h3>用户注册</h3>
      <div class="" style="height: 20px;"></div>
      <van-form>
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
          style="width: 40%; margin-left: 460px;"
        />
        <div class="" style="height: 20px;"></div>
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
          style="width: 40%; margin-left: 460px;"
        />
        <div style="margin: 16px;">
          <van-button
            round
            block
            type="info"
            native-type="submit" style="width: 40%; margin-left: 450px; margin-top: 20px;" color="pink"
            @click="FormReg">
          注册
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { Toast } from 'vant'
export default {
  data () {
    return {
      nickName: '',
      username: '',
      password: '',
      Showform: false,
      productNum: 0,
      isClickCart: false,
      register: false,
      id: ''
    }
  },
  mounted () {
    this.checkLogin()
  },
  methods: {
    checkLogin () {
      axios.get('/users/checkLogin').then((response) => {
        let res = response.data
        if (res.status === 0) {
          this.nickName = res.result
        }
      })
    },
    switchTo (path) {
      this.$router.replace(path)
    },
    toReg () {
      this.register = true
      this.Showform = false
    },
    FormReg () {
      if (!this.username || !this.password) {
        return
      }
      axios.post('/users/register', {
        name: this.username,
        pwd: this.password
      }).then((response) => {
        let res = response.data
        console.log(response)
        if (res.status === 0) {
          Toast(`注册成功, 注册码为${res.result}`)
          this.id = res.result
          this.register = false
        }
        if (res.status === 1002) {
          Toast(res.msg)
        }
      })
    },
    onSubmit () {
      if (!this.username || !this.password) {
        return
      }
      axios.post('/users/login', {
        userName: this.username,
        userPwd: this.password
      }).then((response) => {
        let res = response.data
        if (res.status === 0) {
          console.log('登录成功')
          this.nickName = res.result.userName
          this.Showform = false
        }
      })
    },
    logout () {
      axios.post('/users/logout').then((response) => {
        let res = response.data
        if (res.status === 0) {
          this.nickName = ''
          console.log('退出登录')
        }
      })
    },
    clickForm () {
      this.Showform = true
    },
    hideForm () {
      this.Showform = false
    },
    hideReg () {
      this.register = false
    },
    cart () {
      this.$router.push('/cart')
      this.isClickCart = true
    }
  }
}
</script>

<style lang="scss" scoped>
.nav-wrapper {
  width: 80%;
  height: 125px;
  margin: 10px auto;
  .logo-wrapper {
    width: 17%;
    height: 125px;
    float: left;
    .img-wrapper {
      padding-top: 40px;
      padding-left: 80px;
    }
    span {
      font-size: 18px;
      color: rgb(246, 165, 159);
      padding-left: 70px;
    }
  }
  .nav-header {
    height: 125px;
    ul {
      height: 40px;
      display: flex;
      padding-top: 50px;
      li {
        width: 150px;
        display: inline-block;
        justify-content: space-around;
        text-align: center;
        line-height: 40px;
        cursor:pointer;
        .on{
          color:rgb(246, 165, 159)
        }
      }
      li:hover {
        color:rgb(246, 165, 159);
      }
    }
  }
  .login {
    position: absolute;
    top: 70px;
    right: 110px;
    width: 8%;
    height: 20px;
    // background-color: red;
    cursor: pointer;
    span {
      display: inline-block;
      padding: 5px;
      border: 1px solid pink;
      color: pink;
      border-radius: 6px;
    }
  }
  .shopping-cart {
    position: absolute;
    right: 80px;
    top: 65px;
    cursor: pointer;
  }
  .cart {
    color: pink;
  }
  .tag {
    position: absolute;
    right: 75px;
    top: 60px;
  }
  .model-wrapper {
    z-index: 99;
    position: absolute;
    left: 0;
    top: 10px;
    background-color: rgba(0, 0, 0,0.5);
    width: 100%;
    height: 713px;
    h3 {
      text-align: center;
      font-size: 20px;
      padding-top: 200px;
      color: #fff;
    }
    p {
      margin-left: 20px;
      .input {
        width: 80%;
        margin-top: 20px;
        background-color: transparent;
      }
      .password {
        width: 80%;
        margin-top: 10px;
        background-color: transparent;
      }
      .word {
        padding-right: 16px;
        padding-top: 10px;
      }
    }
  }
}
</style>
